import React from 'react'
import PageTitle from 'component/page-title/index.jsx'
import {Link} from 'react-router-dom'
import Pagination from 'until/pagination/index.jsx'
import Muntil from 'until/mm.jsx'
import Product from 'service/produce-service.jsx'
import TableList from "until/table-list/index.jsx";
import './index.scss'
import ListSearch from "./index-list-search.jsx";


const _mm=new Muntil();
const _product=new Product();

class ProductList extends React.Component{
    constructor(){
        super();
        this.state={
            list:[],
            listType:'list',// 'list' ,'search' 判断列表是默认请求的还是搜索来的
            pageNum:1,

        }

    }
    componentDidMount(){
        this.loadProductList();
    }

    //加载数据
    loadProductList(){
        let listParm={}
        listParm.listType=this.state.listType
        listParm.pageNum=this.state.pageNum
        //如果是搜索的话，需要传入搜索类型和搜索关键字
        if(this.state.listType==='search'){
            listParm.searchType=this.state.searchType
            listParm.keyword=this.state.searchKeyword
        }
        //请求接口
        _product.getProduceList(listParm).then(res=>{
            this.setState(res)
        },errMsg=>{
            _mm.errorTips(errMsg)
        });
    }

    //搜索
    onSearch(searchType,searchKeyword){
        let listType=searchKeyword=='' ? 'list' : 'search'
        this.setState({
            listType        : listType,
            pageNum         : 1,
            searchType      : searchType,
            searchKeyword   : searchKeyword
        },()=>{
            this.loadProductList()
        })

    }

    //页数变化时,改变pageNum,由于setState是异步函数，再掉用loadProductList
    OnPageNumChange(pageNum){
        this.setState({
            pageNum:pageNum
        },()=>{
            this.loadProductList()
        })
    }

    //商品上下架
    onSetProductStatus(e,productId,currentStatus){
        let newStatus =currentStatus==1?2:1,
            confrimTip=currentStatus==1?'确定要下架该商品':"确定要下架该商品"
        if(window.confirm(confrimTip)){
            _product.setProductStatus({
                productId:productId,
                status:newStatus
            }).then(res=>{
                _mm.successTip(res);
                this.loadProductList();
            },errMsg=>{
                _mm.errorTips(errMsg)
            })

        }
    }

    render(){
        let tableHeads=[
            {name:'商品ID',width:'15%'},
            {name:'商品信息',width:'30%'},
            {name:'价格',width:'15%'},
            {name:'状态',width:'20%'},
            {name:'操作',width:'20%'},
        ]
        let listBody= this.state.list.map((product,index)=>{
            return (
                <tr key={index}>
                    <td>{product.id}</td>
                    <td>
                        <p>{product.name}</p>
                        <p>{product.subtitle}</p>
                    </td>
                    <td>{product.price}</td>
                    <td>
                        <p>{product.status==1?'在售':"已下架"}</p>
                        <button className="btn btn-xs btn-warning"
                                onClick={e=>{this.onSetProductStatus(e,product.id,product.status)}}>
                            {product.status==1?'下架':"上架"}</button>
                    </td>
                    <td>
                        <Link className="opera" to={`/product/detail/${product.id}`}>详情</Link>
                        <Link to={`/product/save/${product.id}`}>编辑</Link>
                    </td>
                </tr>
            )
        })

        return(
            <div id="page-wrapper">
                <PageTitle title="商品列表">
                    <div className="page-header-right">
                        <Link to="/produce/save" className="btn btn-primary">
                            <i className="fa fa-plus"></i>
                            <span>添加商品</span>
                        </Link>
                    </div>
                </PageTitle>
                <ListSearch onSearch={(searchType,searchKeyword)=>{this.onSearch(searchType,searchKeyword)}}/>
                <TableList tableHeads={tableHeads}>
                    {listBody}
                </TableList>
                <Pagination current={this.state.pageNum}
                            total={this.state.total}
                            onChange={(pageNum)=>{this.OnPageNumChange(pageNum)}}
                />

            </div>
        )
    }

}

export default ProductList;